import React from 'react';

// ref 的使用:
//01: ref 给普通标签 获取标签元素
//02: ref 给组件绑定, 默认报错, 但是类组件可以, 函数组件不可以, 需要配合 forwardRef()使用
// forwardRef 是一个高阶组件函数, 用法 forwardRef(组件)


// 引入子组件
import Son from './Son';
import { useRef, useEffect, useState } from 'react';
const Father = () => {
    const [count, setCount] = useState(0);
    // 创建ref 引用对象相当于 类组件中 ref1= createRef()
    const [user1, setUser1] = useState({})
    const ref1 = useRef();
    const ref2 = useRef();
    useEffect(() => {
        // console.log('ref1', ref1.current.innerHTML);
        // console.log(document.querySelector('#p1').innerHTML); //0 
        console.log('ref2-1', ref2);

    });
    return (
        <div>
            <p id='p1'>count:{count}</p>
            {/* 给普通元素标签绑定ref ,获取的是标签元素*/}
            {
                console.log('ref2-2', ref2)
            }
            <p ref={ref1}>我是父组件</p>

            {/* 使用子组件,给子组绑定ref, */}
            <p><button onClick={() => {
                ref2.current.addAge()
            }}>年龄++</button></p>
            <Son ref={ref2}></Son>
            {/* {
                ref2.current ? <p>user:{ref2.current?.user?.name}--{ref2.current?.user?.age}</p> : <></>
            } */}
        </div>
    );
}

export default Father;
